<template>
	<view>
		<view class="edit-item">
			<view class="flex flex-column">
				<view class="title mb-2 must">描述</view>
				<view class="flex align-center justify-between w-max-100" style="height: 200rpx;">
					<textarea class="edit-font" :maxlength="-1" v-model="info" placeholder="请输入您的描述"
						style="height: 100%;" />
				</view>
			</view>

			<view class="flex align-center">
				<view class="title must">经纬度</view>
				<view class="flex align-center justify-between">
					<view style="flex-shrink: 0;">经度</view>
					<input class="ml-1 edit-font" type="text" v-model="longitude" placeholder="请输入" />
				</view>
				<view class="flex align-center justify-between">
					<view style="flex-shrink: 0;">纬度</view>
					<input class="ml-1 edit-font" v-model="latitude" type="text" placeholder="请输入" />
				</view>
			</view>

			<view class="flex align-center">
				<view class="title must">地址</view>
				<view class="flex align-center justify-between w-max-100">
					<input class="ml-1 edit-font" v-model="address" type="text" placeholder="请输入" />
				</view>
			</view>


			<view>
				<view class="flex mb-4 align-center justify-between">
					<view class="title must">拍照</view>
				</view>
				<view class="flex flex-wrap clzp-box">
					<!-- 图片 -->
					<view class="img-box mb-2" v-for="(item,index) in images" :key="index">
						<image class="clear-img" @click.stop="clearFile(index)" src="../../static/images/clear-img.png">
						</image>
						<image mode="aspectFit" :src="item | imgUrl" @click.stop="lookImg(item)"></image>
					</view>
					<view class="mb-2">
						<view class="img-box mb-2">
							<image src="../../static/images/up-img.png" @click="upFileImg()"></image>
						</view>
					</view>

				</view>
			</view>
		</view>

		<view class="edit-btn" @click="sendType">提交</view>

	</view>
</template>

<script>
	import util from "../../utils/util.js"
	import {
		upFile,
		url
	} from "../../utils/url.js"
	import {
		postUploadDanger
	} from '../../api/home.js'
	import {
		wechatConfig
	} from '../../api/public.js'
	export default {
		data() {
			return {
				info: '', // 描述
				longitude: '', // 经度
				latitude: '', // 纬度
				address: '', // 地址

				images: [], // 图片
			}
		},

		onLoad() {
			const that = this;
			// uni.getLocation({
			// 	type: 'gcj02',
			// 	altitude: true,
			// 	isHighAccuracy: true,
			// 	success(res) {
			// 		console.log(res)
			// 		that.latitude = res.latitude;
			// 		that.longitude = res.longitude
			// 	}
			// })
		},
		filters: {
			imgUrl(img) {
				if (img.indexOf('http') != -1) return img;
				if (img.indexOf('http') == -1) return url + img
			}
		}, 
		methods: {
			// async init() {
			// 	const that = this;
			// 	uni.getLocation({
			// 		type: 'gcj02',
			// 		altitude: true,
			// 		isHighAccuracy: true,
			// 		success(res) {
			// 			console.log(res)
			// 			that.latitude = res.latitude;
			// 			that.longitude = res.longitude
			// 		}
			// 	})
			// },
			// // 获取经纬度
			// async getUserlocation() {
			// 	const that = this;
			// 	uni.getLocation({
			// 		type: 'gcj02',
			// 		altitude: true,
			// 		isHighAccuracy: true,
			// 		success(res) {
			// 			console.log(res)
			// 			that.latitude = res.latitude;
			// 			that.longitude = res.longitude
			// 		}
			// 	})
			// },
			// 上传文件
			upFileImg() {
				this.chooseImages()
			},

			// 上传图片
			chooseImages() {
				util.uploadImageOne({}, res => {
					this.images.push(res.data.url)
				})
			},

			// 查看图片
			lookImg(url) {
				if (url != '') {
					uni.previewImage({
						current: url,
						urls: [url]
					})
				}
			},


			// 删除图片或视频
			clearFile(index) {
				this.images.splice(index, 1)
			},

			//上传隐患
			async sendType() {


				var data = {
					info: this.info,
					longitude: this.longitude,
					latitude: this.latitude,
					address: this.address,
					images: this.images.length != 0 ? this.images.join(',') : '',
				}
				data.token = uni.getStorageSync('token');

				var res = await postUploadDanger(data)
				if (res.data.code == 1) {
					uni.showToast({
						title: "上传成功",
						success() {
							setTimeout(() => uni.navigateBack(), 1500)
						}
					})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style scoped>
	page {
		background: #f6f6f8;
	}

	/* 查看 */
	.look-item>view {
		width: 100%;
		padding: 30rpx;
		border-bottom: solid 1rpx #f2f2f2;
		background-color: #FFFFFF;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.look-item .title {
		font-size: 28rpx;
		color: #333;
	}

	.look-item .value {
		font-size: 26rpx;
		color: #686868;
	}

	.title {
		min-width: 180rpx;
		margin-right: 20rpx;
	}

	/* 编辑 */
	.edit-item>view {
		background-color: #FFFFFF;
		padding: 25rpx 30rpx;
		border-bottom: solid 1rpx #f4f4f4;
		width: 100%;
		box-sizing: border-box;
		position: relative;
	}

	.edit-item .title {
		font-size: 24rpx;
		color: #545454;
	}

	.picker-veh {
		width: 110rpx;
	}

	.picker-veh image {
		width: 30rpx;
		height: 30rpx;
	}

	.edit-font {
		font-size: 25rpx;
		color: #323232;
	}

	.right-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.edit-item .must::before {
		content: "*";
		position: absolute;
		left: 12rpx;
		color: #ee0a24;

	}

	/* 编辑 保存 */
	.edit-btn {
		width: 690rpx;
		height: 80rpx;
		background-color: #49c265;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin: 20rpx auto;
		border-radius: 10rpx;
	}

	.w-max-100 {
		width: 100%;
	}

	.img-box {
		width: 310rpx;
		height: 200rpx;
		position: relative;
	}

	.img-box image {
		width: 100%;
		height: 100%;
	}

	.img-box video {
		width: 100%;
		height: 100%;
	}

	.clzp-box>view {
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		text-align: center;
		font-size: 24rpx;
	}
</style>
